<template>
  <div class="course-setting">
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="130px"
      size="small"
    >
      <el-row :gutter="20">
        <CoverImg :defaultValue="coverImgInfo" @e-coverImgId="setCoverImgId" />
        <el-col :span="14">
          <div v-if="$store.getters.libraryType == 1">
            <el-form-item v-if="courseTitleShow" label="名称" prop="code">
              <CourseTitleSelect
                :defaultValue="form.code"
                :courseType="form.courseType"
                @e-courseTitleData="setCourseTitle"
              />
            </el-form-item>
            <el-form-item v-if="!courseTitleShow" label="名称" prop="title">
              <el-input v-model.trim="form.title"></el-input>
            </el-form-item>
          </div>
          <div v-else>
            <el-form-item
              :label="$store.getters.libraryMeta.title + '名称'"
              prop="title"
            >
              <el-input v-model.trim="form.title"></el-input>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="14">
          <el-form-item
            :label="form.sourceType == 1 ? '建设单位' : '资源引进单位'"
            prop="sourceUnit"
          >
            <UnitSelect
              :defaultValue="form.sourceUnit"
              @e-unitData="setUnitId"
            />
          </el-form-item>
        </el-col>
        <el-col :span="14" v-if="form.sourceType == 2">
          <el-form-item label="资源建设单位" prop="extFiled2">
            <el-input v-model.trim="form.extFiled2"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item
            label="培训层次"
            prop="trainingLevel"
            v-if="$store.getters.libraryType == 1"
          >
            <TrainingSelect
              :defaultValue="form.trainingLevel"
              @e-trainData="setTrainId"
            />
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="资源分类" prop="labelValue">
            <LabelSelect
              :type="$store.getters.libraryType"
              labelType="1"
              :defaultValue="form.labelValue"
              @e-labelData="setLabelId"
            />
          </el-form-item>
        </el-col>
        <el-col :span="14" v-if="type == 6">
          <el-form-item label="授课教师" prop="responsiblePerson">
            <el-input
              class="user-wrap"
              v-model.trim="form.responsiblePerson"
            ></el-input>
            <el-button
              class="user-select-button"
              type="custom"
              size="small"
              plain
              @click="handleSelect()"
              >选择人员</el-button
            >
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="联系方式">
            <el-input v-model.trim="form.responsiblePhone"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="14" v-if="type == 6">
          <el-form-item label="总学时(课时)">
            <el-input v-model.trim="form.sumHours" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14" v-if="type == 6">
          <el-row>
            <el-col :span="12">
              <el-form-item label="开始时间">
                <el-date-picker
                  v-model="form.startTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="开始时间"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="截止时间">
                <el-date-picker
                  v-model="form.endTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="截止时间"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="14">
          <el-form-item label="简介">
            <UEditor ref="ueditor" :defaultMsg="form.content" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="save">
      <el-button
        @click="submitForm('form')"
        type="custom"
        v-preventReClick
        plain
        >保存</el-button
      >
    </div>
    <UserSelect
      ref="userSelect"
      radioType
      :initialValue="initialValue"
      @e-userData="setUserId"
    />
  </div>
</template>
<script>
import {
  sysCourseUpdate,
  sysCourseQuery,
} from '@/api/admin/courseLibrary/sysCourse.js'
import Bus from '@/utils/bus.js'
export default {
  components: {
    CoverImg: () => import('@/components/coverImg'),
    TrainingSelect: () => import('@/components/trainingSelect'),
    UnitSelect: () => import('@/components/unitSelect'),
    LabelSelect: () => import('@/components/labelSelect'),
    CourseTitleSelect: () => import('@/components/courseTitleSelect'),
    UserSelect: () => import('@/components/userSelect'),
  },
  data() {
    return {
      checkedData: {},
      coverImgInfo: null,
      courseId: this.$store.getters.courseId,
      courseTitleShow: false,
      type: this.$route.meta.type,
      form: {
        id: '',
        title: '',
        code: '',
        content: '',
        sourceType: 1, //1-校内，2-校外
        labelType: 1,
        code: '', //课程编号(校内，code传引用课本源ID)
        sourceUnit: '',
        extFiled2: '', //校外资源建设单位
        labelValue: '',
        fileId: '',
        trainingLevel: '',
        responsiblePerson: '', //负责人
        responsiblePhone: '', //负责人电话
        sumHours: '',
        endTime: '',
        startTime: '',
      },
      rules: {
        code: [{ required: true, message: '请选择名称', trigger: 'blur' }],
        title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        responsiblePerson: [
          { required: true, message: '请选择教师', trigger: 'blur' },
        ],
        responsiblePhone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
        ],
        sourceUnit: [
          {
            required: true,
            message: '请选择建设单位',
            trigger: 'blur',
          },
        ],
        trainingLevel: [
          {
            required: true,
            message: '请选择培训层次',
            trigger: 'blur',
          },
        ],
        extFiled2: [
          { required: true, message: '请输入资源建设单位', trigger: 'blur' },
        ],
        labelValue: [
          { required: true, message: '请选择资源分类', trigger: 'blur' },
        ],
      },
      schoolInfo: {},
      initialValue: {
        userId: [],
      },
      initialValue2: {
        userId: [],
      },
    }
  },
  mounted() {
    this.getInfo()
    this.titleShow()
  },
  methods: {
    setCourseTitle(v) {
      this.form.code = v.id || ''
      this.schoolInfo = v || {}
    },
    setTrainId(v) {
      this.form.trainingLevel = v || ''
    },
    setUnitId(v) {
      this.form.sourceUnit = v || ''
    },
    setLabelId(v) {
      this.form.labelValue = v
    },
    setCoverImgId(v) {
      this.form.fileId = v
    },
    //显示数据
    getInfo() {
      this.checkedData = this.$store.getters.curCourse
      this.coverImgInfo = this.checkedData.hasOwnProperty('sysAttachment')
        ? this.checkedData.sysAttachment
        : ''
      for (let i in this.checkedData) {
        if (this.form.hasOwnProperty(i)) {
          this.form[i] = this.checkedData[i] || ''
        }
      }
    },
    submitForm(form) {
      if (this.form.sourceType == 1 && this.$store.getters.labelType == 1) {
        this.form.title = ''
      }
      this.form.labelValue = this.form.labelValue.toString()
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.edit()
        }
      })
    },
    //编辑
    edit() {
      this.form.content = this.$refs.ueditor.message
      sysCourseUpdate(this.form).then((res) => {
        this.getInfoById()
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
    getInfoById() {
      sysCourseQuery({ id: this.form.id }).then((res) => {
        let row = res.data.data[0]
        this.$store.commit('SETCURCOURSE', row)
      })
    },
    titleShow() {
      this.type = this.$route.meta.type
      if (this.form.sourceType == 2) {
        this.courseTitleShow = false
      } else {
        if (this.type == 1 || this.type == 5) {
          this.courseTitleShow = true
        } else {
          this.courseTitleShow = false
        }
      }
    },
    // 调用选人
    handleSelect() {
      Bus.$emit('userSelect')
    },
    // 获取返回数据回显
    setUserId(v) {
      this.initialValue.userId = []
      if (v.hasOwnProperty('userId')) {
        this.initialValue.userId = v.id
      } else {
        this.initialValue.userId.push(v)
      }
      this.form.responsiblePhone = v.phone
      this.form.responsiblePerson = v.managerName || v.userName
    },
    handleClose(row) {
      this.initialValue.userId = this.initialValue.userId.filter(
        (v) => v.id != row.id,
      )

      this.form.responsiblePhone = ''
      this.form.responsiblePerson = ''
    },
  },
}
</script>
<style scoped>
.course-setting .save {
  width: 100%;
  text-align: center;
}
.user-wrap {
  display: inline-block;
  width: 85%;

  border-radius: 5px;
  overflow: hidden;

  cursor: not-allowed;
}
.user-wrap p {
  color: #bbb;
  text-indent: 10px;
}
.user-wrap span {
  margin: 0 5px;
}
.user-select-button {
  float: right;
}
</style>